<template>
<view class="container">
    <view class="type-navbar">
        <view v-for="(item, index) in categories" :key="index" class="type-box">
            <view :id="item.id" :class="'type-navbar-item ' + (activeCategoryId == item.id ? 'type-item-on' : '')" @tap="changeTab">
                {{item.name}}
            </view>
        </view>
    </view>
    <view class="goods-container">
    <view v-for="(item, index) in orderList.order_list" :key="index" class="goods-box" :data-id="item.id">
            <view class="goods-title">
                <view class="store-name">订单编号:{{item.order_sn}}</view>
                <view class="pay-status">{{item.order_status_detail!=null?item.order_status_detail:''}}</view>
            </view>
            <view class="cont-box">
              <block v-for="(goods, index2) in item.order_goods" :key="index2">
                  <view class="goods-cont">
                      <navigator class="img-box" :url="'/pages/user/order_detail/order_detail?order_id=' + goods.order_id">
                          <image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + goods.goods_id + '&width=200&height=200'"></image>
                      </navigator>
                      <navigator class="goods-mes" :url="'/pages/user/order_detail/order_detail?order_id=' + goods.order_id">
                          <view class="top">
                            <view class="left">{{goods.goods_name}}</view>
                            <view class="right">
                              <view class="price">￥{{goods.member_goods_price}}</view>
                              <view class="num">x{{goods.goods_num}}</view>
                            </view>
                          </view>
                          <view class="bottom">
                              规格：{{goods.spec_key_name==""||goods.spec_key_name==undefined?"--":goods.spec_key_name}}
                          </view>
                      </navigator>
                      <view :hidden="!(item.order_button.return_btn==1&&goods.is_send==1)" class="return-btn" :data-recid="goods.rec_id" @tap="checkReturnGoodsStatus">申请售后</view>
                  </view>
              </block>
            </view>
            <view class="countbox">
              <text class="all">共{{item.goods_sum}}件商品</text><text class="word">实付款：</text><text class="money">￥{{item.total_amount}}</text>
            </view>
            <view class="goods-tips">
                <view class="order-total">
                </view>
                <view class="check-btn">
                    <view :hidden="!(item.pay_btn==1)" @tap="jumpToCart4" class="order-btn order-btn-pay" :data-idx="index">立即付款</view>
                    <view :hidden="!(item.cancel_btn==1&&item.pay_status==0)" class="cancel-btn" @tap="cancelOrder" :data-id="item.order_id">取消订单</view>
                    <navigator :hidden="!(item.cancel_btn==1&&item.pay_status==1)" class="cancel-btn" :url="'/pages/order/refund_order/refund_order?consignee=' + item.consignee + '&mobile=' + item.mobile + '&order_id=' + item.order_id">取消订单</navigator>
                    <view :hidden="!(item.receive_btn==1)" class="order-btn" @tap="confirmOrder" :data-id="item.order_id">确认收货</view>
                    <navigator :hidden="!(item.comment_btn==1)" class="order-btn" url="/pages/user/comment/comment?status=0" redirect>评价</navigator>
                    <navigator :hidden="!(item.shipping_btn==1)" class="order-btn" :url="'/pages/user/express/express?order_id=' + item.order_id">查看物流</navigator>
                </view>
            </view>
        </view>
        <view class="no-data" v-if="!orderList.order_list || orderList.order_list.length == 0">
            <image src="/static/images/cart-null.png" class="cart-image"></image>
            <view class="no-data-title">暂无订单列表</view>
            <navigator url="/pages/index/index/index" class="lookat"> 去逛逛 </navigator>
        </view>
    </view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var common = require("../../../utils/common.js");
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      categories: [{
        name: "全部",
        id: 0
      }, {
        name: "待付款",
        id: 1
      }, {
        name: "待发货",
        id: 2
      }, {
        name: "待收货",
        id: 3
      }, {
        name: "已完成",
        id: 4
      }],
      activeCategoryId: 0,
      orderList: null,
      //请求的订单列表
      currentPage: 1
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var id = typeof options.type == 'undefined' ? this.activeCategoryId : options.type;
    load.init(this, 'order_list', 'orderList');
    this.requestOrderList(id);
    uni.removeStorageSync('order:order_list:update');
  },
  onShow: function () {
    if (uni.getStorageSync('order:order_list:update')) {
      uni.setStorageSync('order:order_list:update', false);
      this.resetData();
      this.requestOrderList(this.activeCategoryId);
    }
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestOrderList(this.activeCategoryId);
    }
  },
  onPullDownRefresh: function (e) {
    this.resetData();
    this.requestOrderList(this.activeCategoryId);
  },
  methods: {
    changeTab: function (e) {
      this.resetData();
      this.requestOrderList(e.currentTarget.id);
    },
    //重置数据
    resetData: function () {
      load.resetConfig();
      this.orderList = null;
      this.currentPage = 1;
    },

    /** 请求订单数据 */
    requestOrderList: function (categoryId) {
      var that = this;
      var requestUrl = that.url + '/api/order/order_list';
      var tabType = '';

      if (categoryId == 1) {
        tabType = 'WAITPAY';
      } else if (categoryId == 2) {
        tabType = 'WAITSEND';
      } else if (categoryId == 3) {
        tabType = 'WAITRECEIVE';
      } else if (categoryId == 4) {
        tabType = 'WAITCCOMMENT';
      }

      if (tabType) {
        requestUrl += '/type/' + tabType;
      }

      this.setData({
        activeCategoryId: categoryId
      });
      requestUrl = requestUrl + '?p=' + that.currentPage;
      load.request(requestUrl, function (res) {
        that.currentPage++;
        res.data.result.order_list.forEach(function (val, index, arr) {
          val.goods_sum = val.order_goods.reduce(function (sum, idx) {
            return sum + idx.goods_num;
          }, 0);
        });
        uni.stopPullDownRefresh();
      });
    },

    /** 取消订单 */
    cancelOrder: function (e) {
      var that = this;
      var orderId = e.currentTarget.dataset.id;
      uni.showModal({
        title: '是否取消订单？',
        success: function (res) {
          if (res.confirm) {
            request.post('/api/user/cancelOrder', {
              data: {
                order_id: orderId
              },
              success: function (res) {
                that.resetData();
                that.requestOrderList(that.activeCategoryId);
              }
            });
          }
        }
      });
    },

    /** 确认收货 */
    confirmOrder: function (e) {
      var that = this;
      var orderId = e.currentTarget.dataset.id;
      uni.showModal({
        title: '确定已收货？',
        success: function (res) {
          if (res.confirm) {
            request.post('/api/user/orderConfirm', {
              data: {
                order_id: orderId
              },
              success: function (res) {
                app.globalData.showSuccess(res.data.msg, function () {
                  that.resetData();
                  that.requestOrderList(that.activeCategoryId);
                });
              }
            });
          }
        }
      });
    },

    /** 判断是否已申请退换货 */
    checkReturnGoodsStatus: function (e) {
      var recId = e.currentTarget.dataset.recid;
      request.get('/api/order/return_goods_status', {
        data: {
          rec_id: recId
        },
        success: function (res) {
          var returnId = res.data.result;

          if (returnId == 0) {
            //未退换货
            return uni.navigateTo({
              url: '/pages/user/return_goods/return_goods?rec_id=' + recId
            });
          } //已申请退换货


          uni.navigateTo({
            url: '/pages/user/return_goods_info/return_goods_info?id=' + returnId
          });
        }
      });
    },

    /** 跳到cart4页面 */
    jumpToCart4: function (e) {
      var order = this.orderList.order_list[e.currentTarget.dataset.idx];
      common.jumpToCart4({
        order_sn: order.order_sn,
        order_amount: order.order_amount
      });
    }
  }
};
</script>
<style>
/* order_list.wxss */
.type-navbar{
    white-space: nowrap;
    display: flex;
    width: 100%;
    height:84rpx;
    background-color: #fff;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
}
.container {
    padding-top: 80rpx;
}
.type-box{
    width:25%;
    box-sizing: border-box;
    font-size: 28rpx;
    line-height: 76rpx;
    padding: 0 20rpx;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}
.type-navbar-item{
    border-bottom: 4rpx solid #fff;
}
.type-item-on{
    position: relative;
    color:#ff6a00;
    font-weight: bold;
}
.type-item-on::before{
  content: '';
  display: block;
  bottom: -3rpx;
  position: absolute;
  width: 50rpx;
	height: 5rpx;
	background-color: #ff6a00;
  left: 30rpx;
}
.goods-container{
    display: flex;
    justify-content: space-between;  
    flex-wrap:wrap;
    box-sizing: content-box;
    padding-top: 20rpx;
}
.goods-box{
    background-color: #fff;
    font-size: 28rpx;
    width: 710rpx;
    margin: 0 auto;
    border-radius: 10rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
}
.goods-title{
    display: flex;
    justify-content:space-between;
    align-items:center;
    height: 80rpx;
    border-bottom: 1rpx solid #f3f3f3;
    padding: 0 20rpx;
}
.store-logo{
    height: 30rpx;
    width: 30rpx;
    border-radius: 25%;
    margin-right:10rpx;
    vertical-align:top;
    position: relative;
    top: 5rpx;
}
.store-name{
    color: #666;
    font-size: 28rpx;
}
.order-number{
    font-size: 24rpx;
    color: #666;
    margin: 30rpx 0;
    padding: 0 20rpx;
}
.pay-status{
    color:#F39818;
}
.goods-cont{
    padding: 20rpx 0;
    margin: 0 20rpx;
    display: flex;
    justify-content:space-between;
    position: relative;
    border-bottom: 1rpx solid #f3f3f3;
}
.cont-box .goods-cont:last-child{
    border:0;
}
.img-box{
    width: 150rpx;
    height: 150rpx;
    border-radius: 5rpx;
}
.goods-mes{
    width: 500rpx;
}
.goods-mes .top{
    width: 100%;
    height: 90rpx;
    box-sizing: border-box;
}
.goods-mes .top .left{
    width: 330rpx;
    float: left;
    color: #666666;
    margin: 10rpx 0rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.goods-mes .top .right{
    width: 150rpx;
    float: right;
    margin: 10rpx 0rpx;
    color:#999999;
    font-size: 22rpx;
}
.goods-mes .top .right .price{
    height: 40rpx;
    line-height: 40rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.goods-mes .top .right .num{
    height: 40rpx;
    line-height: 40rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.goods-mes .bottom{
    color: #999999;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 22rpx;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}
.return-btn{
    color: #999999;
    position: absolute;
    right: 0;
    bottom: 0rpx;
    height: 80rpx;
    line-height: 80rpx;
}
.goods-tips{
    height: 48rpx;
    padding: 15rpx 20rpx;
    display: flex;
    justify-content:space-between;
    align-items:center;
    border-top: 1rpx solid #f3f3f3;
}
.order-total{
    display: flex;
    justify-content:flex-start;
    font-size: 24rpx;
    color: #333;
}
.goods-total{
    margin-right:20rpx;
    color:#ff6a00;
}
.order-btn{
    width: 150rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    margin-left: 20rpx;
    float: right;
    border-radius: 5rpx;
    background: #ff6a00;
    color: #fff;
    font-size: 24rpx;
    border: 1rpx solid #ff6a00;
    box-sizing: border-box;
}
.order-btn-pay{
    color: #fff;
    background-color:#ff6a00;
    border-color:#ff6a00;
}
.cancel-btn{
    width: 150rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    margin-left: 20rpx;
    float: right;
    border-radius: 5rpx;
    background: #fff;
    color: #999999;
    font-size: 24rpx;
    border: 1rpx solid #E6E6E6;
    box-sizing: border-box;
}
.countbox{
  width: 100%;
  height: 40rpx;
  line-height: 40rpx;
  text-align: right;
  padding: 0 20rpx;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 20rpx;
}
.countbox .all{
  font-size: 24rpx;
  color: #999999;
  margin-left: 15rpx;
}
.countbox .word{
  font-size: 24rpx;
  color: #666666;
  margin-left: 15rpx;
}
.countbox .money{
  color: #ff6a00;
  font-size: 28rpx;
  margin-left: 15rpx;
  font-weight: 600;
}
</style>